<div>

  <div class="row-fluid ">
    <div class="recipe-search-control" ng-controller="RecipeSearchController">
      <form class="form-inline">
        <div class="dropdown">
          <div class="input-append">
            <span class="input-med uneditable-input">{{recipe.cls | translate}}</span>

            <div class="btn-group">
              <button class="btn dropdown-toggle"><span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li ng-repeat="cls in allClasses"><a ng-click="recipe.cls=cls">{{cls | translate}}</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="my-dropdown" id="recipe-menu-root" >
          <div class="input-append">
            <span class="span4 uneditable-input my-dropdown-toggle">{{recipe.name}}</span>

            <div class="btn-group">
              <button class="btn my-dropdown-toggle"><span class="caret"></span></button>
            </div>
          </div>
          <div class="my-dropdown-menu">
            <input class="input-medium search my-dropdown-focus" type="text" name="name"
                   ng-model="recipeSearch.text"
                   placeholder="{{ 'RECIPE_SEARCH' | translate }}" select-on-focus stop-click-propogation
                   ng-keypress="onSearchKeyPress($event)" ng-keydown="onSearchKeyDown($event)"
                   id="recipe-search-text"/>
            <ul class="recipe-menu-scrollable" isolate-scrolling>
              <li class="loading" ng-show="recipeSearch.loading"><i class="fa fa-spinner fa-spin"></i> {{'LOADING' | translate}}
              </li>
              <li ng-hide="recipeSearch.loading"
                  ng-repeat="r in recipeSearch.list | orderBy:recipeSearch.order"
                  ng-class="{active: $index === recipeSearch.selected}"
                  id="recipeSearchElement{{$index}}"
                  ng-mouseover="recipeSearch.selected=$index"
                  ng-click="recipeSelected(r.name)">
                <a ng-click="recipeSelected(r.name)">[{{r.baseLevel}}{{'*'.repeat(r.stars)}}] {{r.name}}</a>
              </li>
            </ul>
          </div>
        </div>
      </form>
    </div>
    <simulator-status class="initial-guess" crafter="crafter.stats[recipe.cls]" bonus-stats="bonusStats" recipe="recipe" status="simulatorStatus"
                      valid="isValidSequence(simulatorStatus.sequence, recipe.cls)"></simulator-status>
  </div>

  <div class="row-fluid">
    <div class="span12">
      <div class="row-fluid">
        <div ng-class="{'edit-mode': editingSequence}" ng-show="editingSequence">
          <buffs effects="simulatorStatus.state.effects" recipe="recipe"></buffs>
          <div class="sequence-editor" ng-controller="SequenceEditorController">
            <div class="sequence well well-small">
              <div ng-repeat="action in editSequence track by $index"
                    class="image-wrap glossy icon selectable"
                    ng-class="actionClasses(action, recipe.cls, $index)"
                    ng-click="removeAction($index)"
                    lvl-draggable="true"
                    lvl-drop-target="true"
                    data-index="{{$index}}"
                    on-drop="dropAction(dragEl, dropEl)">
                <img ng-src="{{getActionImagePath(action, recipe.cls)}}"/>
                <span ng-if="actionForName(action).cpCost" class="cp">{{actionForName(action).cpCost}}</span>
                <span ng-if="iActionClassSpecific(action)" class="class-icon">
                  <img ng-src="img/classes/{{actionForName(action).cls}}.png"/>
                </span>
              </div>

              <img class="action empty-action" lvl-drop-target="true"
                   src="img/actions/empty.png"
                   data-index="{{editSequence.length}}"
                   on-drop="dropAction(dragEl, dropEl)"/>
            </div>
            <div class="control-group">
              <button class="btn" ng-click="cancel()">{{ 'CANCEL' | translate }}</button>
              <button class="btn btn-primary" ng-disabled="!isSequenceDirty()" ng-click="save()">{{ 'SAVE' | translate }}</button>
              <button class="btn btn-warning" ng-disabled="!isSequenceDirty()" ng-click="revert()">{{ 'REVERT' | translate }}</button>
              <button class="btn btn-warning" ng-disabled="editSequence.length == 0" ng-click="clear()">{{ 'CLEAR' | translate }}</button>
            </div>
            <h5>{{ 'AVAILABLE_ACTIONS' | translate }}&nbsp;<small>(<a ui-sref="crafter-attributes">{{ 'EDIT_LOWER' | translate }}</a>)</small></h5>

            <div class="action-table">
              <action-table cls="recipe.cls" action-classes="actionTableClasses" selectable="true" draggable="true"
                            on-click="addAction" tooltip-placement="right"/>
            </div>
          </div>
        </div>
        <div ng-show="!editingSequence">
          <action-sequence actions="sequence" cls="recipe.cls" tooltip-placement="right"
                           action-classes="sequenceActionClasses"></action-sequence>

          <div class="btn-toolbar pull-left">
            <div class="input-prepend input-append" dropdown>
              <div class="btn-group">
                <button class="btn" dropdown-toggle><span class="caret"></span></button>
                <ul class="dropdown-menu left">
                  <li ng-repeat="name in savedSynthNames | orderBy:'toString()'">
                    <a ng-click="loadSynth(name)">{{name}}</a>
                  </li>
                </ul>
              </div>
                <span class="uneditable-input span4">
                  <span ng-class="{'invisible': !isSynthDirty()}"><i class="fa fa-asterisk"></i></span>
                  {{synthNameForDisplay()}}
                </span>

              <div class="btn-group">
                <!--
                  -- Hack for bug in angular-ui-bootstrap (fixed in 0.13)
                  -- ng-disabled elements don't close their tooltip
                  -->
                <button class="btn" ng-click="revertSynth()" ng-class="{'disabled': !isSynthDirty()}" tooltip="{{ 'REVERT' | translate }}"><i class="fa fa-undo"></i></button>
                <button class="btn" ng-click="saveSynth()" ng-class="{'disabled': !isSynthDirty()}" tooltip="{{ 'SAVE' | translate }}"><i class="fa fa-floppy-o"></i></button>
                <button class="btn" ng-click="saveSynthAs()" tooltip="{{ 'SAVE_AS' | translate}}"><i class="fa fa-plus"></i></button>
                <button class="btn" ng-click="renameSynth()" tooltip="{{ 'RENAME' | translate }}"><i class="fa fa-pencil"></i></button>
                <button class="btn" ng-click="deleteSynth()" tooltip="{{ 'DELETE' | translate }}"><i class="fa fa-trash"></i></button>
              </div>
              <div class="btn-group">
                <button class="btn" ng-click="importSynth()" tooltip="{{ 'IMPORT_SEQUENCE' | translate }}"><i class="fa fa-upload"></i></button>
                <button class="btn" ng-click="exportSynth()" tooltip="{{ 'EXPORT_SEQUENCE' | translate }}"><i class="fa fa-download"></i></button>
                <button class="btn" ng-click="showMacroImportModal()" tooltip="{{ 'IMPORT_MACRO' | translate }}"><i class="fa fa-arrow-up"></i></button>
              </div>
            </div>
          </div>

          <div class="btn-toolbar pull-right">
            <button class="btn btn-primary" ng-click="editSequenceInline()" ng-disabled="simulatorStatus.running">
                {{ 'EDIT_SIMULATOR' | translate }}
            </button>
            <button class="btn btn-primary" ng-click="goToSolver()">{{ 'SOLVE' | translate}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row-fluid">
    <tabset>
      <tab active="logTabs.monteCarlo.active">
        <tab-heading>{{ 'MONTE_CARLO_SIM' | translate}} &nbsp;<i class="fa fa-refresh flat-button"
                                               ng-click="$emit('simulation.needs.update')"></i></tab-heading>
        <pre>{{simulatorStatus.monteCarlo.logText}}</pre>
      </tab>
      <tab active="logTabs.probabilistic.active">
        <tab-heading>{{ 'PROBABILISTIC_SIM' | translate}}</tab-heading>
        <pre>{{simulatorStatus.probabilistic.logText}}</pre>
      </tab>
      <tab active="logTabs.macro.active">
        <tab-heading>{{ 'MACRO' | translate}}</tab-heading>
        <macros sequence="sequence" cls="recipe.cls" options="macroOptions"></macros>
      </tab>
    </tabset>
  </div>
</div>
